<template>
  <div>
    <my-header :title="title[comName]"></my-header>
    <div class="main">
      <router-view />
    </div>
    <my-table-bar :arr="tabList" @changeComName="changeComName"></my-table-bar>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyTableBar from './components/MyTableBar.vue'

// 动态组件
export default {
  components: { MyHeader, MyTableBar },
  data () {
    return {
      comName: 'MyGoodsList',
      tabList: [
        {
          iconText: 'bi-card-list',
          text: '商品列表',
          componentName: 'MyGoodsList'
        },
        {
          iconText: 'bi-search',
          text: '商品搜索',
          componentName: 'MyGoodsSearch'
        },
        {
          iconText: 'bi-person',
          text: '我的信息',
          componentName: 'MyUserInfo'
        }
      ],
      title: {
        MyGoodsList: '商品列表',
        MyGoodsSearch: '商品搜索',
        MyUserInfo: '我的信息'
      }
    }
  },
  methods: {
    changeComName (comName) {
      this.comName = comName
      this.$router.push('/' + comName)
    }
  }
}
</script>

<style>
.main{
  padding-top: 45px;
  padding-bottom: 51px;
}
</style>
